/* 日志的容器 */
import Card from "../UI/Card/Card";
import LogItem from "./LogItem/LogItem";
import './Logs.css';
import LogFilter from "./LogFilter/LogFilter";
import { useState } from "react";
const Logs = ({ logsData, onDelLog }) => {
    //存储年份
    const [year, setYear] = useState(2024)
    //修改年份函数
    const changeYear = (year) => {
        setYear(year)
    }

    // 将数据放入JSX中
    const currentLog = logsData.filter(item => item.date.getFullYear() === year)
    const logItemDate =currentLog.map(item => <LogItem key={item.id} date={item.date} desc={item.desc}
        time={item.time} id={item.id} onDelLog={onDelLog} />);



    return <Card className="logs">
        <LogFilter year={year} changeYear={changeYear} />
        {
            // 处理空列表
            logItemDate.length > 0 ? logItemDate : <p>记录为空</p>

        }
    </Card>
};

export default Logs;
